<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令</title>
    <style type="text/css">
        .counter {
            display: inline-flex;
            flex-direction: row;
            justify-content: space-between;
            width: 200px;
            height: 30px;
            background: blue;  
            border: 1px solid blue ;
        }
        .counter>i {
            flex-basis: 50px;
            font-size: 24px;
            font-style: normal;
            text-align: center;
            line-height: 28px;
            color: #fff;
            background: blue;
            cursor: pointer;
        }
        .counter>i:hover {
            color: yellow;
            background: rgb(0, 0, 185);
        }
        .counter>input {
            flex-basis: 90px;
            border: none;
            outline: none;
            width: 90px;
            font-size: 24px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>

    <h3>指令: v-on</h3>

    <p>指令 v-on 用于绑定事件监听器</p>
    <p>指令 v-on 的使用方法是 `v-on:eventType.modifier="method"`</p>
    <p>可以将 `v-on:eventType.modifier="method"` 简写为 `@eventType.modifier="method"`</p>

    <div id="root">
        <span class="counter">
            <i v-on:click="decrement">-</i>
            <input type="text" v-model="count">
            <i @click="increment">+</i>
        </span>
        <div class="wrapper" @click.capture.stop.prevent="handler">
            <a href="http://www.kaifamiao.com" @click.capture="open">开发喵</a>
        </div>
    </div>

    <script src="vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    count: 1
                }
            },
            methods: {
                decrement(evt){
                    console.log('decrement click: ' , evt);
                    this.count--;
                },
                increment(evt){
                    console.log('increment click: ' , evt);
                    this.count++;
                },
                open(evt){
                    console.log('open click: ' , evt);
                },
                handler(evt){
                    console.log('handler click: ' , evt);
                }
            }
        });
        app.mount('#root');
    </script>
    
</body>
</html>